<template>
	<view class="home">
		<!--自定义导航栏-->
		<uni-nav-bar class="nav_bar" color="#ffffff" box-shadow="none" background-color="rgba(0,0,0,0)" @click-left="showCity">
			<block slot="left">
				<picker @change="bindPickerChange" :value="index" :range="cityArray">
					<view class="city">
						<image src="../../static/image/ico-position.png" mode="widthFix" style="width: 32rpx; height: 32rpx; margin-left: 5rpx;"></image>
						<view class="cityname">
							<view class="uni-input">{{ city == '' ? cityArray[index] : city }}</view>
						</view>
						<uni-icons type="arrowdown" color="#ffffff" size="22" :value="index" />
					</view>
				</picker>
			</block>
			<view class="input-view">
				<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" color="#ffffff" />
				<uni-icons type="search" size="22" color="#ffffff" />
			</view>
		</uni-nav-bar>
		<!--自定义导航栏-->
		<!--轮播图-->
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="src in banners" v-bind:key="src">
							<view class="swiper-item uni-bg-red"><image style="width:750rpx; height: 400rpx;" mode="aspectFill" :src="src"></image></view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!--轮播图-->

		<!--导航-->
		<view class="uni-flex uni-column chunk_nav">
			<view class="uni-flex uni-row uni-row-space-between">
				<view class="flex-item  piece_bg" v-for="content in navContent.first" v-bind:key="content.title">
					<navigator :url="content.href" hover-class="navigator-hover" class="uni-flex uni-h-center">
						<image :src="content.icon" style="width: 54rpx; height: 54rpx;"></image>
						<view class="uni-flex uni-column">
							<text class="white">{{ content.title }}</text>
							<view class="uni-flex uni-row uni-h-center">
								<text class="small_font white">{{ content.titleEn }}</text>
								<image src="../../static/image/right_arrow.png" style="width: 20rpx; height: 20rpx;"></image>
							</view>
						</view>
					</navigator>
				</view>
			</view>
			<view class="uni-flex uni-row uni-row-space-between">
				<view class="flex-item  piece_bg" v-for="content in navContent.second" v-bind:key="content.title">
					<navigator :url="content.href" hover-class="navigator-hover" class="uni-flex uni-h-center">
						<image :src="content.icon" mode="widthFix" style="width: 54rpx; height: 54rpx;"></image>
						<view class="uni-flex uni-column">
							<text class="white">{{ content.title }}</text>
							<view class="uni-flex uni-row uni-h-center">
								<text class="small_font white">{{ content.titleEn }}</text>
								<image src="../../static/image/right_arrow.png" style="width: 20rpx; height: 20rpx;"></image>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!--导航-->
		<!--精选项目-->
		<view class="choiceness">
			<view class="uni-title uni-common-mt">精选项目</view>
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					<view class="scroll-view-item_H uni-bg-red">
						<image src="https://editor.ajxqj.com/krpano/data/10031/50552/11868/thumb.jpg" style="width: 100%; height: 300rpx;" />
						<cover-view class="controls-title">清远古龍峡玻璃栈道</cover-view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!--精选项目-->
		<!--装饰公司-->
		<view class="decorate">
			<view class="uni-title uni-common-mt">装饰公司</view>
			<view class="decorate_container">
				<view class="decorate_item" style="text-align: center;">
					<image
						src="https://editor.ajxqj.com/upload/zaigou/company/logo/11712/20191002/174cdfce119c4aafb339d7bf8c55da9a.jpeg"
						style="width: 100rpx; height: 100rpx;text-align: center;"
					></image>
					<cover-view class="decorate_title">春满人间装饰如东分公司</cover-view>
				</view>
				<view class="decorate_item" style="text-align: center;">
					<image
						src="https://editor.ajxqj.com/upload/zaigou/company/logo/11712/20191002/174cdfce119c4aafb339d7bf8c55da9a.jpeg"
						style="width: 100rpx; height: 100rpx;text-align: center;"
					></image>
					<cover-view class="decorate_title">春满人间装饰如东分公司</cover-view>
				</view>
				<view class="decorate_item" style="text-align: center;">
					<image
						src="https://editor.ajxqj.com/upload/zaigou/company/logo/11712/20191002/174cdfce119c4aafb339d7bf8c55da9a.jpeg"
						style="width: 100rpx; height: 100rpx;text-align: center;"
					></image>
					<cover-view class="decorate_title">春满人间装饰如东分公司</cover-view>
				</view>
			</view>
			<button type="warn" class="nomore">没有更多了</button>
		</view>
		<!--装饰公司-->
		<!--新闻资讯-->
		<view class="news">
			<view class="uni-title uni-common-mt">新闻资讯</view>
			<view class="news_container">
				<navigator url="#" class="news_item uni-flex uni-row" style="margin: 0 auto;">
					<image src="https://editor.ajxqj.com/upload/sysnews/cover/20191008/efe4de9e371245998919398a0031e55c.jpg" style="width: 100%;height: 120rpx;"></image>
					<view class="uni-flex uni-column">
						<view class="uni-flex uni-row" style="width:100%;">
							<text
								style="font-size: 12rpx; color: white;overflow: hidden;width: 220rpx; white-space: nowrap;display:inline-block;text-overflow: ellipsis!important;text-align: center;"
							>
								城外的人想进去，城里的人真会玩|VR是一座城-恋拍全景
							</text>
							<text style="font-size: 12rpx; color: white;overflow: hidden;width: 150rpx; white-space: pre-wrap; text-align: center;">2019-10-08</text>
						</view>
						<text style="font-size: 12rpx; color: white;overflow: hidden;width:400rpx; white-space: nowrap;display:inline-block;text-overflow: ellipsis!important;">
							城外的人羡慕城里的人，城里的人也希望更多的人进入城内，为共同的事业生活予以努力和奋斗。在很多城外的人还没有接触到VR的时候，城里的人已经开始各种花式玩转VR，即使是VR全景都已经拍遍全国，走向世界，城里的人已经玩转VR+旅游、VR+房地产、VR+餐饮、VR+酒店、VR+教育和VR+购物等众多行业
						</text>
						<view class="uni-flex uni-row uni-row-space-between">
							<view class="uni-flex uni-row uni-h-center" style="float: left;">
								<image src="../../static/image/user.png" style="width: 13rpx; height: 13rpx;"></image>
								<text style="font-size: 12rpx;color:white;">ajxqj.com</text>
							</view>
							<view class="uni-flex uni-row uni-h-center" style="float: right;">
								<image src="../../static/image/eye.png" style="width: 13rpx; height: 13rpx;"></image>
								<text style="font-size: 12rpx;color:white; ">10</text>
								<image src="../../static/image/like.png" style="margin-left:5px; width: 13rpx; height: 13rpx;"></image>
								<text style="font-size: 12rpx;color:white;">10</text>
							</view>
						</view>
					</view>
				</navigator>
			</view>
			<button type="warn" class="nomore">点击加载更多</button>
		</view>
		<!--新闻资讯-->
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	data() {
		return {
			autoplay: true,
			interval: 2000,
			duration: 800,
			indicatorDots: true,
			banners: [],
			cityArray: ['中国', '美国', '巴西', '日本'],
			index: 0,
			navContent: {
				first: [
					{
						href: '#',
						icon: '../../static/image/building.png',
						title: '装企',
						titleEn: 'SUITE'
					},
					{
						href: '#',
						icon: '../../static/image/intermediary.png',
						title: '中介',
						titleEn: 'VILLA'
					},
					{
						href: '#',
						icon: '../../static/image/exhibition.png',
						title: '展厅',
						titleEn: 'EXHIBITION'
					}
				],
				second: [
					{
						href: '#',
						icon: '../../static/image/hotel.png',
						title: '酒店',
						titleEn: 'HOTEL'
					},
					{
						href: '#',
						icon: '../../static/image/star.png',
						title: '娱乐场所',
						titleEn: 'CLUBS'
					},
					{
						href: '#',
						icon: '../../static/image/map-marked.png',
						title: '地图',
						titleEn: 'MAP'
					}
				]
			},
			city: '南通'
		};
	},
	onLoad() {
		this.loadBanner();
		this.holdLocation();
	},
	methods: {
		showCity: function(e) {
			this.bindPickerChange(this.$children);
		},
		bindPickerChange: function(e) {
			this.index = e.target.value;
		},
		loadBanner() {
			uni.request({
				url: this.websiteUrl + '/api/get_banner',
				success: res => {
					this.banners = res.data.data;
				}
			});
		},
		holdLocation() {
			var that = this;
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				geocode: true,
				success: function(res) {
					console.log(res);

					var lng = res.longitude;
					var lat = res.latitude;

					//开始判断，如果不是app则自行解析地址
					// #ifndef APP-PLUS
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo?key=10c074c275486a79f0d029a55863dab5&location=' + lng + ',' + lat,
						method: 'get',
						dataType: 'json',
						header: {
							'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
						},
						success: res => {
							var data = res.data;
							console.log(data);
							if (data.status === '1' && data.info === 'OK') {
								console.log(data.regeocode.addressComponent.city);
								that.city = data.regeocode.addressComponent.city;
							}
						},
						fail: res => {
							uni.showToast({
								title: '定位失败'
							});
						}
					});
					// #endif
				},
				fail: function(res) {
					console.log('err:');
					console.log(res);
				}
			});
		}
	},
	components: {
		uniNavBar,
		uniIcons
	}
};
</script>

<style>
.swiper {
	height: 400rpx;
}
.swiper-item {
	height: 400rpx;
}
.city {
	width: 300rpx;
}
.home {
	background-color: #333333;
}
.uni-flex {
	display: flex;
}
.uni-row {
	flex-direction: row;
}
.uni-column {
	flex-direction: column;
}
.uni-v-center {
	justify-content: center;
}
.uni-h-center {
	align-items: center;
}

.uni-row-space-between {
	justify-content: space-between;
}

.small_font {
	font-size: 12px;
}
.fa-caret-right {
	margin-left: 2px;
}
.piece_bg {
	background-color: #3c3f45;
	box-shadow: rgb(155, 155, 155) 0 0 50px inset;
	width: 29%;
	margin: 10px 4px 1px;
	padding: 6px 4px;
	/* border-radius: 4px; */
	border: #ccccc solid 1rpx;
}
.yellow {
	color: yellow;
}
.white {
	color: white;
}
.blue {
	color: blue;
}
.purple {
	color: purple;
}
.red {
	color: red;
}
.cyan {
	color: cyan;
}
.pink {
	color: pink;
}
.scroll-view_H {
	/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
	white-space: nowrap;
	width: 100%;
}
.scroll-view-item_H {
	display: inline-block;
	width: 35%;
	height: 100rpx;
	height: 300upx;
	text-align: center;
	font-size: 36upx;
	margin: 1%;
	align-items: center;
}
.chunk_nav {
	background-color: #393c43;
	padding: 40rpx 0;
}
.choiceness {
	margin-top: 30rpx;
	background-color: #393c43;
	padding: 40rpx 0;
}
.decorate {
	margin-top: 30rpx;
	background-color: #393c43;
	padding: 40rpx 30rpx;
}
.news {
	margin-top: 30rpx;
	background-color: #393c43;
	padding: 40rpx 30rpx;
}
.uni-title {
	font-size: 40rpx;
	margin-left: 10rpx;
	margin-bottom: 20rpx;
	color: white;
}
.controls-title {
	position: absolute;
	bottom: 8rpx;
	text-align: center;
	font-size: 12rpx;
	color: white;
	width: 34%;
	padding: 4rpx;
	background-color: rgba(0, 0, 0, 0.5);
}
.nav_bar {
	position: fixed;
	top: 30rpx;
	z-index: 1000;
	width: 80%;
	left: 10%;
	border-radius: 30rpx;
	background-color: rgba(0, 0, 0, 0.5);
}
.city {
	display: flex;
	align-items: center;
}
.city uni-image {
	width: 32rpx !important;
	height: 32rpx !important;
}
.uni-navbar__header-container .uni-navbar__content_view input {
	font-size: 50rpx !important;
}
.cityname {
	margin-left: 10rpx;
	font-size: 12rpx;
}
.input-view {
	display: flex;
	align-items: center;
}
.input-view input {
	width: 380rpx;
	padding-left: 30rpx;
	font-size: 48rpx;
}

.uni-input-input,
.uni-input-placeholder {
	width: 100%;
	color: white !important;
	font-size: 15rpx;
}
.decorate .decorate_item {
	width: 45%;
	background-color: #333333;
}
.decorate_title {
	background-color: #cccccc;
	color: white;
	font-size: 20rpx;
}
.decorate_container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.nomore {
	font-size: 12rpx;
	line-height: 60rpx;
	height: 60rpx;
	width: 80%;
	margin-top: 30rpx;
	border-radius: 30rpx;
}
</style>
